<template>
	<view class="post-wrapper">
		<!-- 头部 -->
		<view class="header-wrapper">
			<view class="left">
				<u-icon name="arrow-left" color="#000000" size="25" @click="fh()"></u-icon>
			</view>
			<span>帖子详情</span>
		</view>
		<!-- 评论 -->
		<!-- 帖子 -->
		<view class="lll">
			<view class="lang">
				<!-- 用户 -->
				<view class="h-boxx">
					<view class="h-box">
						<image :src="userlist.user.avatar?userlist.user.avatar :'../../static/article-active.png'"
							mode="">
						</image>
					</view>
					<view class="right">
						<view class="zi1">
							{{userlist.user.name}}
						</view>
						<view class="zi2">
							{{userlist.user.sex}}
						</view>
					</view>
					<view class="jhbox">
						<view class="jh" v-if="userlist.is_top==1">
							精华
						</view>
					</view>
				</view>

				<view class="content">
					{{userlist.desc.text}}
					<view class="img" v-if="userlist.desc.images.length != 0">
						<image :src="userlist.desc.images"></image>
					</view>
				</view>
			</view>

			<view class="pl" v-for="item in pldata" :key="item.id">
				<view class="h-boxx">
					<view class="h-box">
						<image :src="item.user.avatar?item.user.avatar :'../../static/article-active.png'" mode="">
						</image>
					</view>
					<view class="right">
						<view class="zi1">
							{{item.user.name}}
						</view>
						<view class="zi2">
							{{item.content}}
						</view>
						<view class="time">
							{{item.created_time}}
						</view>
					</view>
				</view>
				<!-- 回复 -->
				<view class="hh-boxx" v-for="(it,index) in item.post_comments" :key="index">
					<view class="h-box">
						<image :src="item.user.avatar?item.user.avatar :'../../static/article-active.png'" mode="">
						</image>
					</view>
					<view class="right">
						<view class="zi1">
							{{it.user.name}}
						</view>
						<view class="zi2">
							{{it.content}}
						</view>
						<view class="time">
							{{it.created_time}}
						</view>
					</view>
				</view>
			</view>
			<view class="iii"></view>
		</view>

		<u-popup :show="show" mode="bottom" @close="show=false" @open="open">
			<view class="head">
				<view class="left">
					发表
				</view>
				<view class="right">
					<view class="jh">发送</view>
				</view>
			</view>
		</u-popup>
		<view class="footer">
			<view class="left" @click="show=true">
				<u-input placeholder="说一句吧...." border="surround" v-model="value" @change="change">
				</u-input>
			</view>
			<view class="right">
				<u-icon name="heart" color="#dc3545" size="22"></u-icon>
				{{userlist.support_count==0?'喜欢':userlist.support_count}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		plList,
		readList
	} from "../api/bbs.js"
	export default {
		data() {
			return {
				show: false,
				id: "",
				userlist: [], //用户列表
				pldata: [], //评论数据列表
				page: 1,
				count: 0
			}
		},
		onLoad(e) {
			this.id = e.id;
			console.log(e.id)
			this.getList()
			this.plList()
		},
		methods: {
			//返回上一级
			fh() {
				uni.navigateBack({
					delta: 1
				})
			},
			//渲染用户详情 post_id
			async getList() {
				const res = await readList({
					id: this.id
				})
				console.log(res, "用户")
				this.userlist = res.data.data;
			},
			//渲染用户详情 post_id
			async plList() {
				const res = await plList({
					post_id: this.id,
					page: this.page
				})
				console.log(res, "评论")
				this.pldata = [...this.pldata, ...res.data.data.rows];
				this.count = Math.ceil(res.data.data.count / 10)
			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			//注意数据最好清空下，刷新后只展示第1页的内容
			this.pldata = []
			this.page = 1
			this.plList();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			console.log('到底了');
			console.log(this.page, this.count);
			if (this.page < this.count) {
				this.page++
				this.plList()
			} else {
				wx.showToast({
					title: '到最后一页了',
				})
			}
		},
	}
</script>

<style lang="scss">
	.post-wrapper {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #f5f5f3;
		display: flex;
		flex-direction: column;

		.u-popup {
			width: 100%;
			height: 400rpx;

			.head {
				height: 90rpx;
				border: 1px solid #6c757d;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;

				.left {
					font-size: 40rpx;
				}

				.right {
					height: 100%;
					width: 90rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.jh {
						width: 100rpx;
						height: 50rpx;
						color: #fff;
						background-color: #007aff;
						padding: 5rpx;
						font-size: 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

		}

		.footer {
			width: 100%;
			height: 100rpx;
			background-color: white;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;

			.left {
				padding: 20rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.u--input {
					height: 80rpx;
				}
			}

			.right {
				width: 30%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 35rpx;
				color: #dc3545;
			}
		}


		.header-wrapper {
			flex-shrink: 1;
			height: 120rpx;
			background-color: white;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			span {
				font-size: 35rpx;
				font-weight: 600;
			}

			.left {
				width: 10%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 0;
				top: 0;
			}

		}

		.lll {
			.iii {
				height: 50rpx;
			}

			.lang {

				width: 100%;
				background-color: white;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 15rpx;

				.content {
					margin-top: 10rpx;
					font-size: 35rpx;
					padding: 30rpx;
					box-sizing: border-box;

					.img {
						display: flex;
						flex-wrap: wrap;

						image {
							width: 230rpx;
							height: 200rpx;
						}
					}
				}

				.h-boxx {
					width: 100%;
					height: 130rpx;
					display: flex;
					align-items: center;
					padding: 20rpx;
					box-sizing: border-box;

					.h-box {
						height: 90rpx;
						width: 90rpx;
						border-radius: 50%;
						background-color: white;
						margin-right: 20rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.jhbox {
						height: 100%;
						width: 90rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.jh {
							width: 85rpx;
							height: 50rpx;
							color: #fff;
							background-color: #ffc107;
							padding: 5rpx;
							font-size: 32rpx;
							display: flex;
							justify-content: center;
							align-items: center;

						}
					}

					.right {
						flex: 1;
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.zi1 {
							font-size: 35rpx;
							font-weight: 600;
							color: #007bff;
						}

						.zi2 {
							width: 100%;
							margin-top: 10rpx;
							font-size: 30rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #6c757d;
						}
					}
				}
			}

			overflow: auto;
			width: 100%;
			height: 100%;

			.pl {
				width: 100%;
				background-color: white;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 15rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;

				.hh-boxx {
					width: 93%;
					display: flex;
					align-items: center;
					padding: 20rpx;
					box-sizing: border-box;
					background-color: #f8f9fa;

					.h-box {
						height: 90rpx;
						width: 90rpx;
						border-radius: 50%;
						background-color: white;
						margin-right: 10rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}



					.right {
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.zi1 {
							font-size: 32rpx;
							color: #007bff;
						}

						.zi2 {
							width: 100%;
							font-size: 40rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: black;
						}

						.time {
							width: 100%;
							font-size: 27rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #6c757d;
						}
					}
				}

				.h-boxx {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 20rpx;
					box-sizing: border-box;
					margin-bottom: 30rpx;

					.h-box {
						height: 90rpx;
						width: 90rpx;
						border-radius: 50%;
						background-color: white;
						margin-right: 20rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}



					.right {
						flex: 1;
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.zi1 {
							font-size: 32rpx;
							color: #007bff;
						}

						.zi2 {
							width: 100%;
							font-size: 40rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: black;
						}

						.time {
							width: 100%;
							margin-top: 10rpx;
							font-size: 27;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #6c757d;
						}
					}
				}
			}
		}
	}
</style>
